<template>
  <a-drawer
      v-model:open="open"
      title="系统设置"
      width="600"
      @close="handleClose">
    <span>主题颜色：</span>
    <el-color-picker v-model="color" @change="changeColor" />
  </a-drawer>
</template>
<script setup>
import {computed, defineProps, defineEmits, ref} from 'vue'
import useUserStore from "@/store/modules/user"

const userStore = useUserStore()
const props = defineProps({
  openSystem:Boolean
})
const env_color = import.meta.env.VITE_COLOR
const open = computed(() => props.openSystem)
const emit = defineEmits(['close','changeColor'])
const handleClose = () => {
  emit('close')
}
const color = ref(userStore.color)
const changeColor = (value) => {
  if(value != null){
    color.value = value
    userStore.setColor(value)
  }else{
    color.value = '#1890ff'
    userStore.setColor('#1890ff')
  }
  emit('changeColor',color.value)
}
</script>

<style scoped>

</style>
